


How to Mimic Letters, Fliers, and Stationery Without Using Images

by La_Temperanza



Series: AO3 Work Skins/Tutorials [17]
Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: In-Progress
Published: 2017-07-27
Updated: 2017-07-27
Packaged: 2018-12-04 06:13:51
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 3,724
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/11549178
Author URL: https://archiveofourown.org/users/La_Temperanza/pseuds/La_Temperanza
Summary: This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.





	How to Mimic Letters, Fliers, and Stationery Without Using Images

* * *

Hey! 

So here's your basic letter-looking form. It's just simple black text on a white background, with padding on the sides to prevent the words from getting too close to the edges. This is some just filler text to pad it out a bit: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus. 

And here's some text to show you can use the common tags for **bold** ( <b>Text</b>), _italics_ ( <i>Text</i>), underline (<u>Text</u>), and ~~strikethrough~~ ( <s>Text</s>) in it, no problem. 

Sometimes the p tags (<p>Paragraph</p>) won't automatically add themselves around paragraphs, so you gotta do it yourself it seems!

* * *

# HOW TO CODE IT

First, go to "My Work Skins". If you're not currently using a work skin for your piece, hit the button on the top right that says "[Create Work Skin](http://archiveofourown.org/skins/new?skin_type=WorkSkin)". If you are using a work skin already, you must add the following code to that skin's CSS box, since you can't implement more than one skin for a work at a time.

Put anything you want in the "Title" box, and in the "CSS" box we're going to put the following:
    
    
    #workskin .letter {
      background: #fff;
      color: #000;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    

Hit "Submit" (or "Update" if adding to a previous work skin), and now to implement it in your work.

Go to your the work where you want to use the skin , and before you even get to the "Work Text" box, look above it for a box labeled "Associations". In that box should be an option called "Select Work Skin" with a drop-down box by it; make sure your work skin is currently selected.

Now, go to your "Work Text", make sure the "HTML" button is selected over the "Rich Text", and the basic code is the following:
    
    
    <div class="letter">Letter text here</div>

As I mentioned in the letter, you might have to put <p> </p> around each paragraph because for some reason it doesn't always want to do its own? Not really sure about that.

Now, I know what you're probably saying: "Um, Mrs. La_Temperanza, is there any way to... _jazz it up a little_?" And to that I say, ~~please, Mrs. La_Temperanza is my mother's name,~~ of course there is!

Here's a letter with an aged yellow background (background: #feffe5;), dark brown text (color: #564f03;), the shadow is slightly different (box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);), and the text is justified (text-align: justify;) which means it'll stretch so it fits across to the sides easily.

You can better see what I mean with some dummy text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus.

**Workskin:**
    
    
    #workskin .letter {
      background: #feffe5;
      color: #564f03;
      text-align: justify;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

Here's one that looks like the letter has been folded in half at one point.

Again some dummy text to pad it out: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus.

**Workskin:**
    
    
    #workskin .letter {
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      background: repeating-linear-gradient(#ddd, #eee 50%);
    }

Here's one that looks like a stack of papers on top of another. This effect comes from [this Codepen](https://codepen.io/mlms13/pen/LKFoy), and while the workskin code might seem a little more complicated because of the use of pseudo elements, the coding you put in the work text remains the same!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus.

**Workskin:**
    
    
    #workskin .letter {
      background: #fff;
      color: #000;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 0 10px rgba(0,0,0,0.3);
      position: relative;
      text-align: justify;
    }
    
    #workskin .letter:before,
    #workskin .letter:after {
      content: "";
      height: 98%;
      position: absolute;
      width: 100%;
      z-index: -1;
    }
    
    #workskin .letter:before {
      background: #fafafa;
      box-shadow: 0 0 8px rgba(0,0,0,0.2);
      left: -5px;
      top: 4px;
      transform: rotate(-2.5deg);
    }
    
    #workskin .letter:after {
      background: #f6f6f6;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      right: -3px;
      top: 1px;
      transform: rotate(1.4deg);
    }

Here's another example of stacked letters, just a little neater pile this time! This example comes from [here](https://css-tricks.com/snippets/css/stack-of-paper/)!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus.

**Workskin:**
    
    
    #workskin .letter {
      background-color: #f9f9f9;
      position: relative;
      color: #000;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
    text-align: justify;
    }
    
    #workskin .letter,
    #workskin .letter::before,
    #workskin .letter::after {
      box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
    }
    
    #workskin .letter::before,
    #workskin .letter::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #eee;
    }
    
    #workskin .letter::before {
      left: 7px;
      top: 5px;
      z-index: -1;
    }
    
    #workskin .letter::after {
      left: 12px;
      top: 10px;
      z-index: -2;
    }

All right, so let's talk fonts. At this time, AO3 does not allow the @font-face option, meaning you have to rely on the fonts that your reader might have on their OS. Which doesn't leave us with much, to be quite honest. First, if you look at [this section of the AO3 FAQ](http://archiveofourown.org/faq/skins-and-archive-interface?language_id=en#fonts), you can see what web-safe fonts they allow. One that stuck out to me in particular for mimicking handwriting was "cursive".

The problem with that? This is what cursive looks like. If you're a Mac-related OS, it's pretty. If on Windows, it's...it's pretty much Comic Sans.

_Yeah._

I'm not going to get into an argument about the pros and cons of the font here, just saying it really doesn't give the image of cursive, now does it?

So what can we do? Well, [according this article](https://theedixieflatline.wordpress.com/2013/02/19/the-problem-of-cursive-fonts/) (scroll all the way to the bottom for the comparison tables), the best we can do is put a bunch of common fonts and hope that at least one would show up on different OS. In fact, the author of that article recommends that you put something like the following:
    
    
    font-family:'Lucida Handwriting', 'Monotype Corsiva', Zapfino, 'URW Chancery L', 'Courier New', Courier, monospace;

Which will give us something like this: Handwriting sample here. I don't know how much I agree with this (I personally like Monotype Corsiva listed first), but you can see how many options you can list before it gets to generic. Also, you would just tack it to the end of your letter section, like this:
    
    
    #workskin .letter {
      color: #000;
      text-align: justify;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      background: repeating-linear-gradient(#ddd, #eee 50%);
    font-family:'Lucida Handwriting', 'Monotype Corsiva', Zapfino, 'URW Chancery L', 'Courier New', Courier, monospace;
    }

Or if you wanted it just to have it as say, a signature or something, you would add the following to your workskin:
    
    
    #workskin .signature {
      font-family: 'Lucida Handwriting', 'Monotype Corsiva', Zapfino, 'URW Chancery L', 'Courier New', Courier, monospace;
    }

And then in your worktext, you would just have the following:
    
    
    <span class="signature">signature</span>

For printed letters, you could use any [Web-safe fonts](https://websitesetup.org/web-safe-fonts-html-css/) and you'd be set! (For example, I really like Courier/monospace for "typewriter" kind of letters.

Speaking of fonts, I've noticed in some works that letters are set apart from the rest of story by having the letter text in italics. If you want the letter to be italicized when the creator's style is turned off (i.e when your work is downloaded) but not when it's stylized in letter form, you can do this by add **font-style: none;** to your work skin. However, that means none of the text will be allowed to be shown as italicized, even if you want to stress certain words/sections. (You can always use **bold** or  underlined instead.)

> I've also seen people use blockquotes for letters, and there's a way to do it here too! With one caveat; you have to add **border-left: none;** to your workskin text. This erases the border that usually comes with blockquotes (this text itself is an example of the border turned off); however, if your letter format has a border around it (more about that later), then don't add this to your skin. The work text coding would be:
>     
>     
>     <blockquote class="letter">Letter text here</blockquote>

The last option is to put your letter in hr lines that only show up once the Creator's Style is hidden. If you're familar with my workskins, you know my perfect bit of coding to add to workskins is the following:
    
    
    #workskin .hide {
      display: none;
    }

Then in our work text, we'd have the following:
    
    
    <hr class="hide"><div class="letter">Letter Text Here.</div></hr>

Which means when the style is turned off, it looks something like this:

* * *

Letter Text Here.

* * *

But okay, what about stationery ideas? There's a way to have those too, still without having to rely on outside images. To be honest, the following examples are just me having fun playing with CSS patterns, haha, but maybe someone else will find them cute too!

# WACKY GRADIENT POSTER

Before you say anything, I know. _I know._ Who the heck would actually use a design like this? Well, let me tell you a story, specifically the one behind why I originally got into making these skins. There was one fic I stumbled upon where (I'm paraphasing here) the main character found a flier for this party, and the flier design was...horrendous. Now, I'm not saying this to be mean; there was even in a line in the story that it looked bad, that it was supposed to come off as very "graphic design is my passion" meme.

The problem is, the flier was a static image with no alt description, and it was impossible for me to read with my visual processing problems. I know it probably wasn't too important, but it's very frustrating to have an aspect of a story inacessible to you. However, I think that visual aspects should be allowed in more and more in stories, because I find them rather fun. So what to do? Thus this journey into AO3 skins began, haha.

(Also, in case you're wondering, you do that large, centered header with <center><h1>HEADER TEXT HERE</h1></center> text-shadow: 1px 1px pink; is what forms the text shadow)

 **Workskin:**
    
    
    #workskin .letter {
      background: radial-gradient(blue, violet, indigo, violet, blue);
      color: #FFF;
     text-shadow: 1px 1px pink;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    

But what we can do is add a inner thing so you can still have a wacky gradient border without hurting the eyes? Also, change the font so that its a little more readable. We do this by creating an inner letter with a white background (background: #FFF;) that's transparent (opacity: 0.85;) and add a border ( border: 2px solid black;)

 **Workskin:**
    
    
    #workskin .letter {
      background: radial-gradient(blue, violet, indigo, violet, blue);
      width: 65%;
      margin: 0 auto 25px;
      display: table;
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
    
    #workskin .innerletter {
      background: #FFF;
      color: #000;
      padding: 15px;
      margin: 30px;
      display: inline-block;
      opacity: 0.85;
      border: 2px solid black;
    }

**Note:** For this one, the coding you put in the worktext differs slightly, but not by much!:
    
    
    <div class="letter"><div class="innerletter">Letter text here</div></div>

This one actually only has one color of gray. The other "gray" stripe is created by a white stripe gradient set to a low opacity. Again, this is another example where the work text is <div class="letter"><div class="innerletter">Letter text here</div></div>

**Workskin:**
    
    
    #workskin .letter {
    background: #808080;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
      width: 65%;
      margin: 0 auto 25px;
      display: table;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .innerletter {
    background: #eaeaea;
      color: #000;
      text-align: justify;
      padding: 15px;
      margin: 25px;
      display: inline-block;
      border: 5px solid #808080;
    }

Same kind of concept, but vertical stripes this time and purple. Also, you can change the width of the stripes depending on if you want wide or thin stripes. Just look for background-size: 50px 50px; and change the first 50 i.e. background-size: 20px 50px; or background-size: 100px 50px;

 **Workskin:**
    
    
    #workskin .letter {
      background: #c618dd;
      background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
      background-size: 50px 50px;
      width: 65%;
      margin: 0 auto 25px;
      display: table;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .innerletter {
      background: #FFF;
      color: #c618dd;
      padding: 15px;
      margin: 25px;
    text-align: justify;
      display: inline-block;
      border: 5px solid #c618dd;
    }

Horizontal Stripes this time. And wait, what's this? Two different colors this time for stripes? That's right! Technically you can do this for the other options too, thanks to this option: background-image: linear-gradient(transparent 50%, #54ffe5 50%); where #54ffe5 is the blue. In the other cases, it showed something like rgba(255,255,255,.5), which is white (rgb: 255, 255, 255) set to a .5 opacity. ...I'm probably making this more complicated than it needs to be, especially if you're not that familar with HEX codes and whatnot, but the point is it's very customizable! XD;

Also, to change the width of these stripes, you would use the second option in background-size: 50px 50px; i.e background-size: 50px 20px;

 **Workskin:**
    
    
    #workskin .letter {
      background-color: #ff54b2;
      background-image: linear-gradient(transparent 50%, #54ffe5 50%);
      background-size: 50px 50px;
      width: 65%;
      margin: 0 auto 25px;
      display: table;
      border: 5px solid #000;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .innerletter {
      background: #FFF;
      color: #000;
      padding: 15px;
      margin: 25px;
      text-align: justify;
      display: inline-block;
      border: 5px solid #000;
    opacity: 0.95;
    }

Of course, you don't have to do any patterns at all. Here's a cute little pink note, with rounded corners created using border-radius: 25px; Also, you might have noticed that there's also lines, wow! That's created by the coding background: linear-gradient(to bottom,#ffceee 24px,#fc88d1 1px); background-size: 100% 25px;  
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus. 

**Workskin:**
    
    
    #workskin .letter {
      background: linear-gradient(to bottom,#ffceee 24px,#fc88d1 1px);
      background-size: 100% 25px;
      width: 65%;
      margin: 0 auto 25px;
      display: table;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      border-radius: 25px;
      padding: 10px 15px;
    }
    
    #workskin .innerletter {
      color: #db0087;
      text-align: justify;
      display: table;
      line-height: 25px;
      font-size: 15px;
    }

**NOTE:** For this option, in order for the text to stay on the lines, your work text will be different than the other cases, in that you assign the "innerletter" class to the paragraph tag. To get a better idea of what I mean, here's an example of the worktext:
    
    
    <div class="letter"><p class="innerletter">Letter text here.</p></div>

What this means is that in order to have multiple paragraphs in the letter, you have to use <br><br> after every paragraph rather than relying on the parser to make paragraphs for you. I'm sorry, I've struggled to come up with another way around this, but I have yet to discover one.

(Also, if you're interested, [I've already done a tutorial on how to mimic a sheet of notebook paper](http://teekettle.tumblr.com/post/126214255009/live-example-of-skin-my-ao3-skins))

I'm sure there's multiple other designs that could be made but I didn't want to go too hogwild, haha! However if there's a certain look you're interested in and have trouble figuring out for yourself, please let me know? (Or if there is demand for more stationery ideas, I might make more templates.)

One last thing for this chapter: you can put image(s) in the letters (like included photographs and whatnot), but it's best to put something in the work skin so the image will resize within the letter instead of popping out of it. What I mean is, let's look at an image in our original letter example.

[ ](http://i.imgur.com/wM6fvFa.png)

Like here's an image that's originally 500px by 500px, but thanks to the workskin, it'll still fit in the letter, no matter the browser size. It's best to link the original image to it so people can click it to see the full size. Also, I added a shadow to it as well, so it looks 3D on the letter. Lastly, I removed the line that usually comes with links so you don't have that hanging underneath your image and breaking the illusion.

**Workskin:**
    
    
    #workskin .letter {
      background: #fff;
      color: #000;
      padding: 15px;
      width: 65%;
      margin: 0 auto 25px;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin .imageletter {
      width: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    #workskin a.imagelink,
    #workskin a.imagelink:link,
    #workskin a.imagelink:visited,
    #workskin a.imagelink:active,
    #workskin a.imagelink:hover {
      border-bottom: 0px !important;
    }
    

Then your work text would be:
    
    
    <div class="letter"><a href="IMAGE URL" class="imagelink"><img src="IMAGE URL" class="imageletter" border="0" title=Text for when cursor hovers over image" /></a> LETTER TEXT HERE (or you can do it before the image too if you want).</div>

**EDIT:** [pelele asked](https://archiveofourown.org/comments/149591130) if it was possible to add a background image to the letter itself, and that can be done by using the following workskin:
    
    
    #workskin .letter {
    background-image: url("IMAGE URL") !important;
    background: #fff;
    color: #000;
    padding: 15px;
    width: 65%;
    margin: 0 auto 25px;
    display: block;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }

And you would replace _IMAGE URL_ with the URL of your image. So if we used the paper texture found [here](https://i.imgur.com/hwYiYmn.jpg), our letter would look something like this:

Now our letter has an old aged, paper texture. You might also want to change the background: #fff; to a color closer to the paper texture. If you want it to repeat a certain way, you can utilize the **background-repeat** function, which is explained in detail [here](https://www.w3schools.com/CSSref/pr_background-repeat.asp)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et auctor odio, eu aliquet leo. Curabitur finibus, turpis ut aliquet condimentum, lacus est placerat velit, a condimentum nisl dolor dictum eros. Suspendisse dapibus lacus sed pretium tempor. Cras erat tortor, auctor sit amet massa sed, imperdiet mattis tellus. Praesent augue lacus, tempor id aliquet ut, rhoncus eleifend massa. Aliquam sed elementum odio. Nunc molestie augue vitae nisl molestie, in faucibus lorem accumsan. Praesent eleifend eget dui nec cursus.

# NOTES

\- Like other work skins, this won't work on downloaded works or ones where the creator's style is turned off.

\- If you want different types of letters in one work, you have to rename each section a different name, like letter2, letter3, etc.

\- The two examples of stacked letters don't seem to work on iOS Safari? At least not on my end. I have no idea why that is. 

\- The "Chapters: 1/?" thing is not a mistake; this is a WIP because I plan on adding more to this in the future, I just needed to break it down into chapters.

\- For other examples of printed media, check out my tutorials on how to [mimic sticky notes (Post-its)](http://teekettle.tumblr.com/post/121690800779/so-after-i-made-my-last-ao3-work-skin) and how to [mimic newspaper articles](http://teekettle.tumblr.com/post/124765663544/original-article-live-example-of-skin-my-ao3).

\- If you liked this, please leave a comment or at least a kudos? As always, if you have any questions or concerns, you can leave a comment here or send me a message at my AO3 skin tumblr, [To Skin a Fic](http://to-skin-a-fic.tumblr.com/).


End file.
